<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
.demoContainer{
    display: flex;
    background-color: #f3f5f6;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.demoContainer p {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    background-color: #0eb6f8;
    width: 198px;
    font-size: 14px;
    color: #fff;
    margin: 2% 0.5%;
    transition: all 0.3s;
    text-align: center;
}
.box{
    align-items: center;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.box-item{
    display: inline-block;
    margin: 30px;//item之间相距距离
    flex-direction: column;
    background-color: #fff;
    border: 1px #666666 solid;
    height: 175px;
    overflow: hidden;
    position: relative;
    /*display: inline-block;*/
    /* 确保内容不会溢出容器 */
    /*justify-content: center;//控制主轴对齐*/
    align-items: start;//控制交叉轴对齐
    /*padding: 10px;//页面内容距离边框*/
}
.box-item:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* 添加半透明白色背景 */
    z-index: 1; /* 确保半透明背景在图片之上 */
}
.box-item:hover img{
    filter: opacity(70%) brightness(90%); /* 鼠标悬浮时图片变浅 */
}
.box-item img {
    width: 300px;
    height: 150px;
    display: block;
    transition: filter 0.5s ease; /* 添加过渡效果 */
}
.box-item .caption {
    height: 175px;
    position: absolute;
    bottom: -140px; /* 初始时文字位于底部 */
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* 初始背景颜色 */
    color: white;
    transition: bottom 0.3s ease, background-color 0.3s ease; /* 添加过渡效果 */
}
.box-item:hover .caption {
    bottom: 0px; /* 鼠标悬浮时文字上浮 */
    background-color: rgba(75, 178, 243, 0.7); /* 鼠标悬浮时改变文字背景颜色 */
}
/*.box-item:hover h5{*/
/*    margin-bottom: 200px!important;*/
/*    background: #3dd5f3;*/
/*    opacity: 0.8;*/
/*    transition: 0.5s;*/
/*}*/
    </style>
</head>
<body>
<div class="demoContainer">
    <p>合作客户</p>
    <div class="box">
        <div class="box-item">
            <img th:src="@{img/clients/client-1.png}"  width="300px" height="150px" alt="...">
            <div class="caption">速腾</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/client-2.png}"  width="300px" height="150px" alt="...">
            <div class="caption">天能股份</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/client-3.png}"  width="300px" height="150px" alt="...">
            <div class="caption">久森新能源</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/client-4.png}"  width="300px" height="150px" alt="...">
            <div class="caption">鹏辉</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/client-5.png}"  width="300px" height="150px" alt="...">
            <div class="caption">嘉盈时代</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/client-6.png}"  width="300px" height="150px" alt="...">
            <div class="caption">锂威</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/client-7.png}"  width="300px" height="150px" alt="...">
            <div class="caption">豪鹏科技</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/client-8.png}"  width="300px" height="150px" alt="...">
            <div class="caption">亿纬锂能</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/client-10.jpg}"  width="300px" height="150px" alt="...">
            <div class="caption">贝特赛能源</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/允升.jpg}"  width="300px" height="150px" alt="...">
            <div class="caption">允升科技</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/国光电子.png}"  width="300px" height="150px" alt="...">
            <div class="caption">国光电子</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/实达科技.png}"  width="300px" height="150px" alt="...">
            <div class="caption">实达科技</div>
        </div>
<!--        <div class="box-item">-->
<!--            <img th:src="@{img/clients/桓能芯电.png}"  width="300px" height="150px" alt="...">-->
<!--            <div class="caption">桓能芯电</div>-->
<!--        </div>-->
        <div class="box-item">
            <img th:src="@{img/clients/立泰能源.png}"  width="300px" height="150px" alt="...">
            <div class="caption">立泰能源</div>
        </div>
        <div class="box-item">
            <img th:src="@{img/clients/赣锋锂业.png}"  width="300px" height="150px" alt="...">
            <div class="caption">赣锋锂业</div>
        </div>
    </div>
</div>
</div>
</body>
</div>
</html>